<h4>{{title}}
    <i ng-show="loading" class='icon-spinner icon-spin'></i>
    <i class='spacing-hack icon-ok'></i>
</h4>
<hr class='settings-separator'>
<table class="table">
    <thead>
        <tr>
            <th>
                <i class='icon-ok'></i>
            </th>
            <th>Cluster Name</th>
            <th>URL</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="cluster in clusters">
            <td>
                <input type="checkbox" ng-model="cluster.checked" ng-click="updateControls(cluster)"
                ng-checked="cluster.checked" value="{{cluster.id}}" />
            </td>
            <td>{{cluster.name}}</td>
            <td>{{cluster.api_base_url}}</td>
        </tr>
        <tr ng-show="!clusters.length">
            <td ng-click='openAdd()' colspan=3>No clusters available.</td>
        </tr>
    </tbody>
</table>
<button class="btn" ng-click="editOpen()" ng-disabled='allDisabled || !editEnabled'
type="button">
    <i class='icon-edit'></i>Edit</button>
<button class="btn" ng-click="addOpen()" ng-disabled='allDisabled || !addEnabled'
type="button">
    <i class='icon-plus'></i>Add</button>
<button class="btn" ng-click="removeOpen()" ng-disabled='allDisabled || !removeEnabled'
type="button">
    <i class='icon-trash'></i>Remove</button>
<div ng-controller='addClusterController' modal="addClusterOpen"
close="addClose()" options="opts">
    <div class="modal-header">
        <h3>
            <i class="icon-plus"></i>Add a Cluster
            <i ng-show="loading" class='icon-spinner icon-spin'></i>
        </h3>
    </div>
    <div class="modal-body">
        <form name='form' class='css-form' novalidate>
            <fieldset>
                <label for="">Name</label>
                <input name="name" ng-model="cluster.name" required type="text"
                placeholder="Name of Cluster" />
                <span class='text-error' ng-show='nameError'>{{nameErrorMsg}}</span>
            </fieldset>
            <fieldset>
                <label for="">Cluster REST API URI</label>
                <input name="api_base_url" class="span5" ng-model="cluster.api_base_url"
                required type="url" placeholder="REST API URI" />
                <div class='text-error' ng-show='api_base_urlError'>{{api_base_urlErrorMsg}}</div>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning cancel" ng-click="addClose()">Cancel</button>
        <button class="btn btn-success" ng-disabled="form.$invalid || isUnChanged(cluster)"
        ng-click="addCluster(cluster)">Add</button>
    </div>
</div>
</div>
<div ng-controller='editClusterController' modal="editClusterOpen" close="hideModal()"
options="opts">
    <div class="modal-header">
        <h3>
            <i class="icon-edit"></i>Edit Cluster
            <i ng-show="loading" class='icon-spinner icon-spin'></i>
        </h3>
    </div>
    <div class="modal-body">
        <form name='form' class='css-form' novalidate>
            <fieldset>
                <label for="">Name</label>
                <input name="clusterName" type="text" required ng-model="cluster.name"
                placeholder="Name of Cluster" />
                <span class='text-error' ng-show='nameError'>{{nameErrorMsg}}</span>
            </fieldset>
            <fieldset>
                <label for="">Cluster REST API URI</label>
                <input class="span7" name="clusterAPI" type="url"
                required ng-model="cluster.api_base_url" placeholder="REST API URI" />
                <div class='text-error' ng-show='api_base_urlError'>{{api_base_urlErrorMsg}}</div>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning cancel" ng-click="hideModal()">Discard</button>
        <button class="btn btn-success" ng-disabled="form.$invalid || isUnChanged(cluster)"
        ng-click="editCluster(cluster)">Save</button>
    </div>
</div>
</div>
